import React, { useEffect, useRef, useState } from 'react';
import './style.less';
import { AlignType, DataIndex, FixedType, Key } from '@/table/interface';

interface ColumnType {
  title?: React.ReactNode;
  key?: Key;
  className?: string;
  dataIndex?: DataIndex;
  width?: number | string;
}
export interface VirtualListProps {
  dataSource?: object[];
  columns?: ColumnType[];
  scroll?: {
    x?: number | string;
    y?: number | string;
  };
  /**
   * 稳定的
   * 默认为false，加上后，就是禁止状态，不加，就是真正模拟真实的滚动
   * */
  stable?: boolean; //
}
const itemHeight = 40;
const step = 20; // 一次渲染20个
export const VirtualList: React.FC<VirtualListProps> = props => {
  const { dataSource = [], columns = [], scroll, stable } = props;
  const [scrollTop, setScrollTop] = useState(0);
  const ref = useRef<any>();

  const index = Math.floor(scrollTop / itemHeight); // 下舍入

  let dataSourceTrans = dataSource.slice(index, index + step);

  // 到最后的时候
  if (dataSource.length - (index + step) <= step) {
    dataSourceTrans = dataSource.slice(index, index + step);
  }

  return (
    <div className="ant-table-wrapper">
      <div className="ant-table ant-table-fixed-header">
        <div className="ant-table-container">
          <div className="ant-table-header" style={{ overflow: 'hidden' }}>
            <table style={{ tableLayout: 'fixed' }}>
              <colgroup>
                {columns.map(item => {
                  return <col style={{ width: item.width }} />;
                })}
              </colgroup>
              <thead className="ant-table-thead">
                <tr>
                  {columns.map(item => {
                    return (
                      <th key={item.key} className="ant-table-cell">
                        {item.title}
                      </th>
                    );
                  })}
                  <th className="ant-table-cell ant-table-cell-scrollbar"></th>
                </tr>
              </thead>
            </table>
          </div>
          <div
            ref={ref}
            className="ant-table-body"
            style={{
              overflowY: 'scroll',
              height: scroll!.y,
              maxHeight: scroll!.y,
              position: 'relative',
            }}
            onScroll={(e: any) => {
              // @ts-ignore
              const scrollTopEnd = itemHeight * dataSource.length - scroll!.y;
              // 防止到底部的时候滚动条乱跑，导致页面乱晃
              if (e.target.scrollTop < itemHeight * dataSource.length) {
                console.log(
                  index,
                  e.target.scrollTop,
                  itemHeight * dataSource.length,
                );
                //setScrollTop(index*itemHeight);
                setScrollTop(
                  e.target.scrollTop > scrollTopEnd
                    ? scrollTopEnd
                    : e.target.scrollTop,
                );
              }
            }}
          >
            <div
              style={{
                tableLayout: 'fixed',
                // transform: `translateY(${scrollTop}px)`,
                height: itemHeight * dataSource.length,
              }}
            >
              {/* index * itemHeight 这段代码的意义在于，滚动条，滚动一格，我页面才滚动，这样就可以真正模拟正常滚动 */}
              <div
                className="virtualList-tbody"
                style={{
                  position: 'absolute',
                  top: stable ? scrollTop : index * itemHeight,
                }}
              >
                {dataSourceTrans.map((item: any) => {
                  return (
                    <div
                      style={{ height: itemHeight }}
                      key={item.key}
                      data-row-key={item.key}
                      className={`virtualList-row virtualList-row-level-${0}`}
                    >
                      {columns.map(({ dataIndex = '', width }) => {
                        return (
                          <span style={{ width }} className="virtualList-cell">
                            {item[dataIndex]}
                          </span>
                        );
                      })}
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

VirtualList.defaultProps = {
  columns: [],
};
/*
 * 遗留问题
 * 1.宽度如何更好的处理
 * 2.需要有一个监听宽度的东西
 * 3.不固定高度如何解决
 * 4.如何让他更具通用性，既，完善为更通用一点的组件
 * */
